<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>太极图</title>
	<style type="text/css">
		#cvs{
			/*background: pink;*/
		}
	</style>
</head>
<body>
	<canvas id="cvs" width="300px" height="300px">
		你的浏览器不支持canvas标签
	</canvas>
	<script type="text/javascript">
		var canvas=document.getElementById("cvs");
		var cxt = canvas.getContext("2d");

		cxt.beginPath();
		cxt.arc(150,150,100,0*Math.PI/180,360*Math.PI/180,true);
		cxt.stroke();
		cxt.closePath();

		cxt.beginPath();
		cxt.fillStyle = "black";
		// cxt.strokeStyle = "red";
		cxt.arc(150,100,50,-90*Math.PI/180,90*Math.PI/180,false);
		cxt.arc(150,200,50,-90*Math.PI/180,90*Math.PI/180,true);
		cxt.arc(150,150,100,90*Math.PI/180,-90*Math.PI/180,true);
		cxt.fill();
		cxt.stroke();
		cxt.closePath();

		cxt.beginPath();
		cxt.fillStyle = "black";
		// cxt.strokeStyle = "red";
		cxt.arc(150,100,8,0*Math.PI/180,360*Math.PI/180,false);
		cxt.fill();
		cxt.stroke();
		cxt.closePath();

		cxt.beginPath();
		cxt.fillStyle = "white";
		// cxt.strokeStyle = "red";
		cxt.arc(150,200,8,0*Math.PI/180,360*Math.PI/180,false);
		cxt.fill();
		cxt.stroke();
		cxt.closePath();
	</script>
</body>
</html>